<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>EContact-登录</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/general.css" type="text/css" media="screen" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>


<script type="text/javascript">

$(document).ready(function(){	
	var form = $("#contactform");	
	var loginname = $("#loginname");
	var loginnameInfo = $("#loginnameInfo");	
	var pwd = $("#pwd");
	var pwdInfo = $("#pwdInfo");
	
	
	
	//On blur
	loginname.blur(validateLoginName);
	pwd.blur(validatePwd);
	
	//On key press
	loginname.keyup(validateLoginName);
	pwd.keyup(validatePwd);
	
	
	
	//表单提交
	form.submit(function(){
		if( validateLoginName() &  validatePwd())
		{
			//ajax验证用户和密码
			if(validateNameAndPwdAjax())
			{
				return true;
			}
		}
		return false;
		
	});	
	
	function validateNameAndPwdAjax()
	{
		//alert("validateNameAndPwdAjax");
		var loginname=$("#loginname").val();
		var pwd=$("#pwd").val();
		
		return true;
		$.post("/econtact/user/loginValidateNameAndPwdAjax.action", { "loginName": loginname,"pwd":pwd},
	   function(returnValue){
	    	if(returnValue==false)
	    	{	    		
	    		alert(true);
	    		//$("#errorInfo").html("");	    		 		
				return true;
	    	}else
	    	{
	    	
	    		$("#errorInfo").html("密码错误!");
	    		//用户已经存在	    		
				return false;
	    		
	    	};
	   }, "json")
		
	}
	
	function validateLoginName(){	
		var temp=$("#loginname").val();		
		var filter = /^\w{6,18}$/;
		if(filter.test(temp)){
			loginname.removeClass("error");
			loginnameInfo.text("");
			loginnameInfo.removeClass("error");
			return true;
		}else{			
			loginname.addClass("error");
			loginnameInfo.text("");
			loginnameInfo.addClass("error");
			return false;
		}	
	}
	
	function validatePwd(){
		var temppwd = $("#pwd");			
		if(temppwd.val().length <6){		
			pwd.addClass("error");
			pwdInfo.text("");
			pwdInfo.addClass("error");
			return false;
		}else{			
			pwd.removeClass("error");
			pwdInfo.text("");
			pwdInfo.removeClass("error");
			return true;
		}
	}


});
</script>

</head>
<body>
	<div class="main" >
  <div class="header">
    <div class="block_header">
      <div class="logo"><a href="${pageContext.request.contextPath}/index.jsp"><img src="${pageContext.request.contextPath}/images/logo.gif" width="277" height="143" border="0" alt="logo" /></a></div>
      <div class="search">
        <form id="form1" name="form1" method="post" action="">
          <label><span>
            <input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
            </span>
            <input name="b" type="image" src="${pageContext.request.contextPath}/images/search.gif" class="button" />
          </label>
        </form>
      </div>
      <div class="menu">
        <ul>
          <li><a href="${pageContext.request.contextPath}/index.jsp" ><span>Home</span></a></li>
          <li><a href="${pageContext.request.contextPath}/about.jsp"><span> About Us</span></a></li>
          <li><a href="${pageContext.request.contextPath}/services.jsp"><span>Services</span></a></li>
          <li><a href="${pageContext.request.contextPath}/services.jsp"><span>Portfolio</span></a></li>
          <li><a href="${pageContext.request.contextPath}/contact.jsp" class="active"><span> Contact Us </span></a></li>
        </ul>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  
  
  <div class="slider_top">
    <div class="header_text2">
      <a href="#"><img src="${pageContext.request.contextPath}/images/Sing_up.gif" alt="picture" border="0" /></a>
      <h2>登录 </h2>
      <div class="clr"></div>
    </div>
  </div>
  
  
  <div class="top_bg2">
   <div class="clr"></div>
  </div>
  <div class="clr"></div>
   <div class="body">
    <div class="body_resize">
      <div class="left">
        <h2>登录econtact平台<br />
        <span>Lorem Ipsum as their default model text...</span></h2>      
        <span style="width:100%;padding:15px;display: block;color: red;height: 20px;" id="errorInfo" name="errorInfo"></span>
		<form action="${pageContext.request.contextPath}/user/login.action" method="post" id="contactform">       
         	  <div style="float: left;padding-right: 50px;">
         	  	<ul style="list-style:none; margin:0 0 0 10px; padding:10px 0 20px 0;">
         	  		<li>用户名</li>
         	  		<li><input id="loginname" name="loginname" class="text" type="text" style="width: 180px;height: 23px;line-height: 180%" /></li>
         	  		<li> <span id="loginnameInfo" style="display:block; height:32px;padding-top:15px"></span></li>
         	  	</ul>	          
          	  </div>
          	  
              <div>
         	  	<ul style="list-style:none; margin:0 0 0 10px; padding:10px 0 20px 0;">
         	  		<li>密码</li>
         	  		<li><input id="pwd" name="pwd" class="text" type="password" style="width: 180px;height: 23px;line-height: 180%" /></li>
         	  		<li> <span id="pwdInfo" style="display:block; height:32px;padding-top:15px"></span></li>
         	  	</ul>
          	  </div>
           
         
              <input type="image" style="padding-left:10px;" id="ok" name="ok" class="ok"  src="${pageContext.request.contextPath}/images/ok.jpg" />
			
			<span style="padding-left: 80px;"><a href="#">找回密码。。</a> </span>
        </form>
      </div>
      <div class="right">
        <h2>Get in touch<br />
       <span> live from our blog page</span></h2>
        <p><strong>Lorem Ipsum as their default model text...</strong><br />
        There are many variations of passages of Lorem Ipsum available, but the majority have suffered.</p>
        <p><strong>Address</strong>:          1458 Sample Road, Greenvalley, 12<br />
          <strong>Telephone</strong>:      +123-1234-5678<br />
          <strong>FAX</strong>:                  +458-4578<br />
          <strong>Others</strong>:            +301 - 0125 - 01258<br />
          <strong>E-mail</strong>:              <strong>mail@yoursitename.com</strong></p>
          <div class="bg"></div>
			<img src="${pageContext.request.contextPath}/images/cont_1.gif" alt="picture" class="floated" />
			<img src="${pageContext.request.contextPath}/images/cont_2.gif" alt="picture" class="floated" />
			<img src="${pageContext.request.contextPath}/images/cont_3.gif" alt="picture" class="floated" />
			<img src="${pageContext.request.contextPath}/images/cont_4.gif" alt="picture" class="floated" />
			<img src="${pageContext.request.contextPath}/images/cont_5.gif" alt="picture" class="floated" />
			<img src="${pageContext.request.contextPath}/images/cont_6.gif" alt="picture" class="floated" />
      </div>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
  </div>
  <div class="footer">
  <div class="footer_resize">
  <p class="leftt">© Copyright 2009. Your Site Name Dot Com. All Rights Reserved<br />
    <a href="#">Home</a> | <a href="#">Contact</a> | <a href="#">RSS </a></p>
    <p class="rightt"><a href="#"><strong>Design by DreamTemplate </strong></a></p>
    <div class="clr"></div>
  <div class="clr"></div>
</div>
</div>
</div>


</body>
</html>